<template>
  <view class="account-item">
    <view class="item-content item-flex">
      <view class="item-img">
        <u--image :src="data.mainPictureUrl" width="80rpx" height="80rpx" mode="widthFix" shape="circle"></u--image>
      </view>
      <view class="item-main item-flex">
        <view class="item-cell">
          <view class="cell-main">{{ data.userName }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AccountItem',
  props: {
    data: { type: Object, default: () => ({}) }
  },
  data() {
    return {}
  },
  components: {},
  filters: {},
  computed: {},
  watch: {},
  methods: {
  },
  created() { },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.account-item {
  padding: 0 20rpx;
  border-bottom: 1px solid #f1f1f1;

  .item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  .item-content {
    height: 80rpx;
    padding: 20rpx 0;
  }

  .item-img {
    flex-shrink: 0;
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .item-main {
    height: 100%;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
    overflow: hidden;
  }

  .item-cell {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .cell-main {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .cell-right {
      flex-shrink: 0;
    }
  }
}
</style>